import React, { useState, useRef } from 'react'
import { CSSTransition } from 'react-transition-group'
import { getName, prefixStyle, formatPlayTime } from '../../../api/utils'
import {
  NormalPlayerContainer,
  Top,
  Middle,
  Bottom,
  Operators,
  CDWrapper,
  ProgressWrapper
} from './style'
import animations from 'create-keyframe-animation'
import { playMode } from '../../../api/config'
import ProgressBar from '../../../baseUI/progressBar'

function NormalPlayer(props) {
  const {
    song,
    fullScreen,
    playingState,
    currentIndex,
    currentSong,
    percent,
    duration,
    currentTime,
    mode
  } = props
  const {
    toggleFullScreen,
    togglePlayingState,
    changeCurrentIndex,
    changeCurrentSong,
    clickPlaying,
    onProgressChange,
    handlePrev,
    handleNext,
    changeMode
  } = props

  const NormalPlayerRef = useRef()
  const CDWrapperRef = useRef()

  const transform = prefixStyle('transform')

  // 启用帧动画
  const enter = () => {
    NormalPlayerRef.current.style.display = 'block'

    const { x, y, scale } = _getPosAndScale()
    const animation = {
      0: {
        transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
      },
      60: {
        transform: `translate3d(0, 0, 0) scale(1.1)`
      },
      100: {
        transform: `translate3d(0, 0, 0) scale(1)`
      }
    }
    animations.registerAnimation({
      name: 'move',
      animation,
      presets: {
        duration: 400,
        easing: 'linear'
      }
    })
    animations.runAnimation(CDWrapperRef.current, 'move')
  }

  // 计算偏移的辅助函数
  const _getPosAndScale = () => {
    const targetWidth = 40
    const paddingLeft = 40
    const paddingBottom = 30
    const paddingTop = 80
    const width = window.innerWidth * 0.8
    const scale = targetWidth / width
    // 两个圆心的横坐标距离和纵坐标距离
    const x = -(window.innerWidth / 2 - paddingLeft)
    const y = window.innerHeight - paddingTop - width / 2 - paddingBottom
    return {
      x,
      y,
      scale
    }
  }

  const entered = () => {
    const CDWrapperDOM = CDWrapperRef.current

    animations.unregisterAnimation('move')
    CDWrapperDOM.style.animation = ''
  }

  const exit = () => {
    if (!CDWrapperRef.current) return
    const CDWrapperDOM = CDWrapperRef.current

    CDWrapperDOM.style.transition = 'all 0.4s'
    const { x, y, scale } = _getPosAndScale()

    CDWrapperDOM.style[
      transform
    ] = `translate3d(${x}px, ${y}px, 0) scale(${scale})`
  }

  const exited = () => {
    if (!CDWrapperRef.current) return
    const CDWrapperDOM = CDWrapperRef.current

    CDWrapperDOM.style.transition = ''
    CDWrapperDOM.style[transform] = ''
    NormalPlayerRef.current.style.display = 'none'
  }

  const getMode = () => {
    let content = ''

    if (mode === playMode.sequence) {
      content = '&#xe64c;'
    } else if (mode === playMode.loop) {
      content = '&#xe670;'
    } else {
      content = '&#xe601;'
    }

    return content
  }

  return (
    <CSSTransition
      in={fullScreen}
      timeout={400}
      mountOnEnter
      onEnter={enter}
      onEntered={entered}
      onExit={exit}
      onExited={exited}
    >
      <NormalPlayerContainer ref={NormalPlayerRef}>
        <div className="background">
          <img
            src={song.al.picUrl + '?param=300x300'}
            width="100%"
            height="100%"
            alt="歌曲图片"
          />
        </div>
        <div className="background layer"></div>
        <Top className="top">
          <div className="back" onClick={() => toggleFullScreen(false)}>
            <i className="iconfont icon-back">&#xe712;</i>
          </div>
          <h1 className="title">{song.name}</h1>
          <h1 className="subtitle">{getName(song.ar)}</h1>
        </Top>
        <Middle ref={CDWrapperRef}>
          <CDWrapper>
            <div className="cd">
              <img
                className={`image play ${playingState ? '' : 'pause'}`}
                src={song.al.picUrl + '?param=400x400'}
                alt=""
              />
            </div>
          </CDWrapper>
        </Middle>
        <Bottom className="bottom">
          <ProgressWrapper>
            <span className="time time-1">{formatPlayTime(currentTime)}</span>
            <div className="progress-bar-wrapper">
              <ProgressBar
                percent={percent}
                percentChange={onProgressChange}
              ></ProgressBar>
            </div>
            <div className="time time-r">{formatPlayTime(duration)}</div>
          </ProgressWrapper>
          <Operators>
            <div className="icon i-left" onClick={changeMode}>
              <i
                className="iconfont"
                dangerouslySetInnerHTML={{ __html: getMode() }}
              ></i>
            </div>
            <div className="icon i-left" onClick={handlePrev}>
              <i className="iconfont">&#xea87;</i>
            </div>
            <div className="icon i-center">
              <i
                className="iconfont"
                onClick={e => clickPlaying(e, !playingState)}
                dangerouslySetInnerHTML={{
                  __html: playingState ? '&#xe810;' : '&#xe653;'
                }}
              ></i>
            </div>
            <div className="icon i-right" onClick={handleNext}>
              <i className="iconfont">&#xea8a;</i>
            </div>
            <div className="icon i-right">
              <i className="iconfont">&#xe60f;</i>
            </div>
          </Operators>
        </Bottom>
      </NormalPlayerContainer>
    </CSSTransition>
  )
}
export default React.memo(NormalPlayer)
